<script>
import { mapState } from 'vuex';
import { updateAreaDropApi } from '@/api/car/areaApi';

export default {
  name: 'areaForm',
  data() {
    return {
      formData: {
        // 区域名称
        areaName: '',
        // 车位数
        spaceNumber: '',
        // 面积
        areaProportion: '',
        // 关联计费规则ID
        ruleId: '',
        // 备注
        remark: '',
      },
      // form表单组件实例
      formRef: null,
      formRules: {
        areaName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' },
        ],
        spaceNumber: [
          { required: true, message: '请输入车位数', trigger: 'blur' },
        ],
        areaProportion: [
          { required: true, message: '请输入车位数', trigger: 'blur' },
        ],
        ruleId: [
          { required: true, message: '请选择计费规则', trigger: 'select' },
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    // 用于派发action获取计费规则的回调函数
    async fetchRoleDropList() {
      try {
        await this.$store.dispatch('areaStore/fetchRoleDropListAction');
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    // 用于数据回显区域的回调函数
    fetchAreaDropDetail(areaDrop) {
      const { areaName, spaceNumber, areaProportion, ruleId, remark, id } = areaDrop;
      this.formData.areaName = areaName;
      this.formData.spaceNumber = spaceNumber;
      this.formData.areaProportion = areaProportion;
      this.formData.ruleId = ruleId;
      this.formData.remark = remark;
      this.formData.id = id;
    },
    // 重置表单的回调函数
    clearFormData() {
      this.$refs.formRef.resetFields();
      this.formData.id = undefined;
      console.log(this.formData.id);
    },
  },
  computed: {
    ...mapState('areaStore', ['dropList']),
  },
  mounted() {
    this.fetchRoleDropList();
  },
};
</script>

<template>
  <el-form size="small" label-width="110px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="区域名称" prop="areaName">
      <el-input placeholder="请输入区域名称" v-model="formData.areaName"></el-input>
    </el-form-item>
    <el-form-item label="车位数(个)" prop="spaceNumber">
      <el-input placeholder="请输入车位数(个)" type="number" v-model="formData.spaceNumber"></el-input>
    </el-form-item>
    <el-form-item label="面积(㎡)" prop="areaProportion">
      <el-input placeholder="请输入面积(㎡)" v-model="formData.areaProportion"></el-input>
    </el-form-item>
    <el-form-item label="计费规则" prop="ruleId">
      <el-select v-model="formData.ruleId">
        <el-option v-for="(item,index) in dropList" :label="item.ruleName" :value="item.ruleId" :key="item.ruleId"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input type="textarea" :rows="3" placeholder="请输入备注内容" v-model="formData.remark"></el-input>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
</style>
